<template>
    <div class="pasword">
        <Header title="修改密码" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <div class="box_user">
            <img src="../assets/lock.png">
            <input class="inpou" type="password" v-model="used" placeholder="请输入原密码">
        </div>
        <div class="box_user">
            <img src="../assets/lock.png">
            <input class="inpou" type="password" v-model="fresh" placeholder="请输入新密码">
        </div>
        <div class="box_user">
            <img src="../assets/lock.png">
            <input class="inpou" type="password" v-model="novel" placeholder="请再次输入新密码">
        </div>
        <div class="btn" @click="old_Submission">提交</div>
    </div>
</template>

<script>
import Header from './header'
import { password } from '../old_request'
import { Toast } from "mint-ui";
export default {
    data(){
        return{
            used:null,
            fresh:null,
            novel:null
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        old_Submission(){
            let that = this;

            if(that.used == undefined){
                Toast({
                    message: "原密码不能为空",
                    iconClass: "iconfont icon-cuowu",
                });
                return false;
            }
             if(that.fresh == undefined){
                Toast({
                    message: "新密码不能为空",
                    iconClass: "iconfont icon-cuowu",
                });
                return false;
            }
             if(that.novel == undefined){
                Toast({
                    message: "新密码不能为空",
                    iconClass: "iconfont icon-cuowu",
                });
                return false;
            }
            if(that.fresh !== that.novel){
                Toast({
                    message: "两次密码不一致",
                    iconClass: "iconfont icon-cuowu",
                });
                return false;
            }

            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}timestamp=${that.wrapper.gettime()}userId=${that.wrapper.getlocalstoage('userid')}`),
                "timestamp":that.wrapper.gettime(),
                "userId":that.wrapper.getlocalstoage('userid'),
                "oldPassword":that.$md5(that.used),
                "newPassword":that.$md5(that.novel)
            }
            
            password(data,that).then( (res) => {
                console.log(res)
                if(res.code === 0){
                    Toast({
                        message: "修改成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    setTimeout(function(){
                        localStorage.clear();
                        that.$router.push('/');
                    },2000)
                }
            })
        }
    }
}
</script>

<style scoped>
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .pasword{
        margin-top: 80px;
    }
    .box_user{
        display: flex;
        width: 85%;
        margin: 0 auto;
        padding: 5px 10px;
        height: 30px;
        line-height: 30px;
        background: #EEEEEE;
        border-radius: 50px;
        margin-top: 20px;
    }
    .box_user img{
        height: 28px;
    }
    .box_user .inpou{
        border: none;
        outline: none;
        background: #EEEEEE;
        padding-left: 5px;
        width: 80%;
    }   
    .btn{
        width: 90%;
        background: linear-gradient(to right, #128ae7, #12ade7);
        text-align: center;
        border-radius: 50px;
        height: 45px;
        line-height: 45px;
        color:white;
        margin: 30px auto;
    }
</style>